﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UcDaManagerEnglish.ascx.cs" Inherits="TheHeGeo.UserControl.UcDaManagerEnglish" %>
<%@ Register TagPrefix="dx" Namespace="DevExpress.Web" Assembly="DevExpress.Web.v14.2, Version=14.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %>


<style type="text/css">
    .auto-style1 { width: 124px; }
</style>
<style>
      #map_canvas {
        width: 850px;
        height: 800px;
      }
    </style>
 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
   
    var map;
    var loadMap = false;
    /*function OnGridFocusedRowChanged() {
        grvData.GetRowValues(grvData.cpEditingRowIndex, 'Latitude;Longitude', OnGetRowValues);
    }

    function OnGetRowValues(values) {
        current_possition = values;
    }*/


    function fShowMap() {
        Popup.SetHeaderText("Edit sensor possition");
        Popup.Show();
    }

    var MapInitialized = false;
    function OnPopupShown(s, e) {

        initialize();
        addMarkers();
    }
    function initialize() {  
        var map_canvas = document.getElementById('map_canvas');

        var map_options = {
            center: new google.maps.LatLng(16.436085, 108.587151),
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };

        map = new google.maps.Map(map_canvas, map_options);
        
        
    }
    
    function addMarkers() {
        var Latitude = document.getElementById('ContentPlaceHolder1_UcDaManager1_grvData_DXEditor9_I').value;
        var Longtitude = document.getElementById('ContentPlaceHolder1_UcDaManager1_grvData_DXEditor10_I').value;
        if (Latitude.length <= 0 || Longtitude.length <= 0) {
            Latitude = 21;
            Longtitude = 105;
        }
         
        var contenString = "<div>" +
            "<table>" +           
            "<tr>" +
            "<td height ='100'>" +
            "Current possition <br> Longtitude: " + Longtitude + "<br> Latitude: " + Latitude +
            "</td>" +
            "</tr>" +
            "</div>";

        var infowindow = new google.maps.InfoWindow({
            content: contenString,
        });
        var iconBase = 'http://geotechnical.vn:8888/Icon/SensorIcon_n.png';

        var markerImage = new google.maps.MarkerImage(
            iconBase,
            new google.maps.Size(16, 16), //size
            null, //origin
            null, //anchor
            new google.maps.Size(16, 16) //scale
        );
        myLatlng = new google.maps.LatLng(Latitude, Longtitude);
        var marker = new google.maps.Marker(
            {
                position: myLatlng,
                title: 'Move bookmark to change possition!',
                map: map,
                icon: markerImage,
                draggable: true
            });
        
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, this);
        });
         
        google.maps.event.addListener(map, 'zoom_changed', function () {

            var pixelSizeAtZoom0 = 16; //the size of the icon at zoom level 0
            var maxPixelSize = 40; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels

            var zoom = map.getZoom();
            if (zoom <= 6) zoom = 0;
            var relativePixelSize = Math.round(pixelSizeAtZoom0 * Math.pow(2, zoom)); // use 2 to the power of current zoom to calculate relative pixel size.  Base of exponent is 2 because relative size should double every time you zoom in

            if (relativePixelSize > maxPixelSize) //restrict the maximum size of the icon
                relativePixelSize = maxPixelSize;

            //change the size of the icon
            marker.setIcon(
                new google.maps.MarkerImage(
                    marker.getIcon().url, //marker's same icon graphic
                    null,//size
                    null,//origin
                    null, //anchor
                    new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale
                )
            );
        });
        
        google.maps.event.addListener(
            marker,
            'dragend',
            function () {
                //javascript: grvData.PerformCallback("EditPossition");
                var Lat = document.getElementById('ContentPlaceHolder1_UcDaManager1_grvData_DXEditor9_I');
                Lat.value = marker.position.lat().toFixed(4);
                
                var Long = document.getElementById('ContentPlaceHolder1_UcDaManager1_grvData_DXEditor10_I');
                Long.value = marker.position.lng().toFixed(4);
                contenString = "<div>" +
            "<table>" +
            "<tr>" +
            "<td height ='100'>" + 
                "Vị trí hiện tại <br> Longitude: " + Long.value + "<br> Latitude: " + Lat.value +
            "</td>" +
            "</tr>" +
            "</div>";

                infowindow = new google.maps.InfoWindow({
                    content: contenString,
                });
                
            });
    }
</script>
<div id ="divContent" style="width: 98%">
     
    <table id="tablecontent" style="width: 100%;">
        <tr>
            <td>
                <dx:ASPxGridView ID="grvData" runat="server" Width="100%" AutoGenerateColumns="False" OnRowUpdating="grvData_RowUpdating"  OnRowInserting="grvData_RowInserting" KeyFieldName="MaDuAn">
                    <Columns>
                        <dx:GridViewCommandColumn ShowClearFilterButton="True" ShowEditButton="True" ShowNewButtonInHeader="True" VisibleIndex="0" Width="30px">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        </dx:GridViewCommandColumn>
                        <dx:GridViewDataTextColumn Caption="Project" FieldName="TenDuAn" Name="TenDuAn" VisibleIndex="1" Width="100px">
                            <EditFormSettings ColumnSpan="2" />
                            <EditCellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </EditCellStyle>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                             <Settings AutoFilterCondition="Contains" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </CellStyle>
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn FieldName="MaDuAn" Name="MaThietBi" ReadOnly="True" ShowInCustomizationForm="False" VisibleIndex="2" Caption="Project Id" Width="30px">
                            <EditFormSettings ColumnSpan="2" />
                            <EditCellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </EditCellStyle>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                             <Settings AutoFilterCondition="Contains" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </CellStyle>
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataMemoColumn Caption="Description" FieldName="ChuThich" Name="ChuThich" VisibleIndex="8" Width="100px">
                            <EditFormSettings CaptionLocation="Near" ColumnSpan="2" RowSpan="8" />
                            <EditCellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </EditCellStyle>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                             <Settings AutoFilterCondition="Contains" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </CellStyle>
                        </dx:GridViewDataMemoColumn>
                        <dx:GridViewDataTextColumn Caption="Location" FieldName="DiaDiem" VisibleIndex="3" Name="DiaDiem" Width="100px">
                            <EditFormSettings ColumnSpan="2" />
                            <EditCellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </EditCellStyle>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                             <Settings AutoFilterCondition="Contains" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </CellStyle>
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataMemoColumn Caption="Admin" FieldName="Edit" Name="Edit" VisibleIndex="9" Width="100px">
                            <EditFormSettings ColumnSpan="2" RowSpan="8" CaptionLocation="Near" />
                            <EditCellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </EditCellStyle>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                             <Settings AutoFilterCondition="Contains" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </CellStyle>
                        </dx:GridViewDataMemoColumn>
                        <dx:GridViewDataMemoColumn Caption="User" FieldName="Display" Name="Display" VisibleIndex="10" Width="100px">
                            <EditFormSettings ColumnSpan="2" RowSpan="8" CaptionLocation="Near" />
                            <EditCellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </EditCellStyle>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                             <Settings AutoFilterCondition="Contains" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </CellStyle>
                        </dx:GridViewDataMemoColumn>
                        <dx:GridViewDataTextColumn Caption="Monitoring item" FieldName="HangMucQuanTrac" Name="HangMucQuanTrac" VisibleIndex="4" Width="100px">
                            <EditFormSettings ColumnSpan="2" />
                            <EditCellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </EditCellStyle>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                             <Settings AutoFilterCondition="Contains" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </CellStyle>
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn Caption="Elevation" FieldName="Altitude" Name="Altitude" VisibleIndex="7" Width="30px">
                            <EditFormSettings ColumnSpan="2" />
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataButtonEditColumn Caption="Latitude" FieldName="Latitude" Name="Latitude" VisibleIndex="6" Width="30px">
                            <PropertiesButtonEdit DisplayFormatString="g">
                                <ClientSideEvents ButtonClick="function(s, e) {fShowMap(s,e);}" />
                                <Buttons>
                                    <dx:EditButton>
                                    </dx:EditButton>
                                </Buttons>
                            </PropertiesButtonEdit>
                            <EditFormSettings ColumnSpan="2" />
                        </dx:GridViewDataButtonEditColumn>
                        <dx:GridViewDataButtonEditColumn Caption="Longitude" FieldName="Longitude" Name="Longitude" VisibleIndex="5" Width="30px">
                            <PropertiesButtonEdit DisplayFormatString="g">
                                <ClientSideEvents ButtonClick="function(s, e) {fShowMap(s,e);}" />
                                <Buttons>
                                    <dx:EditButton>
                                    </dx:EditButton>
                                </Buttons>
                            </PropertiesButtonEdit>
                            <EditFormSettings ColumnSpan="2" />
                        </dx:GridViewDataButtonEditColumn>
                         <dx:GridViewDataComboBoxColumn Caption="Status"   FieldName="Status" Name="Status" VisibleIndex="11">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </CellStyle>
                        </dx:GridViewDataComboBoxColumn>
                    </Columns>
                    <SettingsBehavior ConfirmDelete="True" AutoFilterRowInputDelay="100" />
                    <SettingsPager PageSize="20">
                    </SettingsPager>
                    <Settings ShowFilterRow="True" ShowFilterBar="Auto" ShowFilterRowMenu="True" />
                   <%-- <SettingsText ConfirmDelete="Do you want to delete this row ?" />--%>
                    <SettingsCommandButton>
                        <NewButton Text="Add"></NewButton>
                        <UpdateButton Text="Update" ></UpdateButton>
                        <CancelButton Text="Cancel"></CancelButton>
                        <EditButton Text="Edit"></EditButton>
                       <%-- <DeleteButton Text="Delete">
                        </DeleteButton>--%>
                    </SettingsCommandButton>
                </dx:ASPxGridView>
            </td>
        </tr>
    </table>
     <dx:ASPxPopupControl ID="ASPxPopupControl1" ClientInstanceName="Popup" runat="server" 
        PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" AllowDragging="True" AllowResize="True" Modal="True" CloseAction="CloseButton">
        <ContentCollection>
            <dx:PopupControlContentControl runat="server" ID="ContentColl1">
                <div id="map_canvas" style="width:1000px; height: 800px"></div>
                <div>
                    <asp:hiddenfield ID="LatLong"  runat="server" value="sdfsdafsd">  
                    </asp:hiddenfield>
                </div>
            </dx:PopupControlContentControl>
        </ContentCollection>
         <ClientSideEvents Shown="OnPopupShown" />
    </dx:ASPxPopupControl>
</div>